<template>
	<view>
		<view class="linkman-page app-bank-top" v-if="!loading">
			<view class="mian-title">紧急联系人</view>
			<view class="main-sub">为保障平台与您的相关协议有效，建议您填写您的紧急联系人信息；若出现纠纷可进一步协调。</view>
			<view class="main-content">
				<view class="item">
					<view class="label">紧急联系人</view>
					<input type="text"  @input="inputChange" id="real_name" :value="form.real_name" class="set" placeholder="请填写紧急联系人" />
				</view>
				<view class="item">
					<view class="label">联系人手机号</view>
					<input type="text" @input="inputChange" id="phone" :value="form.phone" class="set" placeholder="请填写联系人手机号" />
				</view>
				
				<view class="post-btn app-btn-bg" @click="submit">{{isCerate ? '确定提交' : '修改'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		urgentCreate,
		urgentInfo,
		urgentEdit
	} from '@/api/user.js';
	export default {
		data() {
			return {
				loading: true,
				isCerate: true,
				editId: null,
				form: {
					real_name: "", 
					phone: "", 
				},
			}
		},
		onLoad() {
			const that = this
			urgentInfo().then(res => {
				that.loading = false
				if (res.data.real_name) {
					that.isCerate = false
					that.editId = res.data.id
					that.form.real_name = res.data.real_name
					that.form.phone = res.data.phone
				} else {
					that.isCerate = true
				}
			})
		},
		methods:  {
			inputChange(e) {
				this.form[e.currentTarget.id] = e.detail.value
			},
			submit() {
				if (this.form.real_name == "") {
				  uni.showToast({
				    title: "请填写紧急联系人",
				  });
				  return false;
				}
				if (this.form.phone == "") {
				  uni.showToast({
				    title: "请填写联系人手机号",
				  });
				}
				
				if (this.isCerate) {
					urgentCreate(this.form).then(res => {
						uni.showToast({
							title: '提交成功'
						})
					})
				} else {
					urgentEdit(this.editId, this.form).then(res => {
						uni.showToast({
							title: '修改成功'
						})
					})
					
				}
			}
		}
	}
</script>

<style lang="scss">
	page { background-color: #fff; }
	.linkman-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230522/618bfe2d7704be4e07b6bdcdef51bd4f.png');
		background-repeat: no-repeat;
		width: 100%;
		background-color: #fff;
		
		.mian-title {
			padding: 0 24rpx;
			padding-top: 224rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 48rpx;
		}
		
		.main-sub {
			padding: 0 24rpx;
			margin-top: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	
		.main-content {
			margin-top: 66rpx;
			padding: 0 24rpx;
			border-radius: 32rpx;
			background-color: #fff;
			
			.item {
				padding: 48rpx 0 32rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
				
				.set {
					margin-top: 56rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 32rpx;
				}
			}
			
			.post-btn {
				margin-top: 48rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>